<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>挪车通知系统管理后台</title>
    <link rel="stylesheet" href="admin.css">
    <link rel="stylesheet" href="admin2.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
</head>
<body class="admin-body prevent-bounce">
    <div class="admin-container">
        <!-- 遮罩层 -->
        <div class="sidebar-overlay"></div>

        <!-- 左侧导航 -->
        <aside class="admin-sidebar" id="adminSidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="ri-car-line"></i>
                    <span>挪车通知系统</span>
                </div>
            </div>
            <nav class="sidebar-nav">
                <a href="#dashboard" class="nav-item active" data-section="dashboard">
                    <i class="ri-dashboard-line"></i>
                    <span>控制面板</span>
                </a>
                <a href="#settings" class="nav-item" data-section="settings">
                    <i class="ri-settings-line"></i>
                    <span>系统设置</span>
                </a>
                <a href="#security" class="nav-item" data-section="security">
                    <i class="ri-shield-keyhole-line"></i>
                    <span>安全设置</span>
                </a>
                <a href="#history" class="nav-item" data-section="history">
                    <i class="ri-history-line"></i>
                    <span>历史记录</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <a href="index.html" class="nav-item">
                    <i class="ri-arrow-left-line"></i>
                    <span>返回前台</span>
                </a>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="admin-main">
            <!-- 顶部栏 -->
            <header class="admin-header">
                <div class="header-left">
                    <button class="menu-toggle" id="menuToggle">
                        <i class="ri-menu-line"></i>
                    </button>
                    <h1 class="page-title">控制面板</h1>
                </div>
                <div class="header-right">
                    <div class="db-status" id="dbStatus">
                        <span class="status-dot"></span>
                        <span class="status-text">检查中...</span>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="admin-content">
                <!-- 控制面板 -->
                <section id="dashboard" class="content-section active">
                    <div class="section-header">
                        <h2>    <br>    </h2>
                        <p>    <br>    </p>
                        <h2>系统概览</h2>
                        <p>查看系统运行状态和关键指标</p>
                    </div>

                    <div class="dashboard-grid">
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="ri-notification-4-line"></i>
                            </div>
                            <div class="stat-info">
                                <h3>今日通知</h3>
                                <p id="todayCount">0</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="ri-time-line"></i>
                            </div>
                            <div class="stat-info">
                                <h3>总通知次数</h3>
                                <p id="totalCount">0</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="ri-notification-badge-line"></i>
                            </div>
                            <div class="stat-info">
                                <h3>最近通知</h3>
                                <p id="lastNotifyTime">暂无</p>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 系统设置 -->
                <section id="settings" class="content-section">
                    <div class="section-header">
                        <h2>    <br>    </h2>
                        <p>    <br>    </p>
                        <h2>系统设置</h2>
                        <p>配置系统参数和通知设置</p>
                    </div>

                    <form class="settings-form" id="settingsForm">
                        <div class="settings-card">
                            <h3 class="card-title">
                                <i class="ri-base-station-line"></i>
                                系统配置
                            </h3>
                            <div class="form-group">
                                <label>车主电话</label>
                                <input type="tel" id="phoneInput" class="form-input" 
                                    placeholder="请输入电话号码" required>
                            </div>
                            <div class="form-group">
                                <label>通知冷却时间（秒）</label>
                                <input type="number" id="cooldownInput" class="form-input" 
                                    placeholder="请输入冷却时间" min="1" required>
                                <span class="form-help">两次通知之间的最小间隔时间</span>
                            </div>
                            <div class="form-group">
                                <label>默认通知消息</label>
                                <textarea id="defaultMessageInput" class="form-textarea" 
                                    placeholder="请输入默认通知消息" required></textarea>
                            </div>
                            <div class="form-group">
                                <label>API接口地址</label>
                                <input type="url" id="apiUrlInput" class="form-input" 
                                    placeholder="请输入API接口地址" required>
                                <span class="form-help">推送服务的API接口地址</span>
                            </div>
                            <div class="form-group">
                                <label>AppToken</label>
                                <input type="text" id="appTokenInput" class="form-input" 
                                    placeholder="请输入WxPusher的AppToken" required>
                                <span class="form-help">在WxPusher管理后台获取的应用Token</span>
                            </div>
                            <div class="form-group">
                                <label>UID</label>
                                <input type="text" id="uidInput" class="form-input" 
                                    placeholder="请输入接收消息的用户UID" required>
                                <span class="form-help">在WxPusher中扫码关注后获取的用户ID</span>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-save-line"></i>
                                保存设置
                            </button>
                            <button type="button" class="btn btn-secondary" id="testPushBtn">
                                <i class="ri-send-plane-line"></i>
                                发送测试
                            </button>
                            <button type="reset" class="btn btn-secondary">
                                <i class="ri-refresh-line"></i>
                                重置
                            </button>
                        </div>
                    </form>
                </section>

                <!-- 安全设置 -->
                <section id="security" class="content-section">
                    <div class="section-header">
                        <h2>    <br>    </h2>
                        <p>    <br>    </p>
                        <h2>安全设置</h2>
                        <p>修改管理员密码和安全选项</p>
                    </div>

                    <form class="settings-form" id="securityForm">
                        <div class="settings-card">
                            <h3 class="card-title">
                                <i class="ri-lock-line"></i>
                                密码修改
                            </h3>
                            <div class="form-group">
                                <label>当前密码</label>
                                <input type="password" id="currentPassword" class="form-input" 
                                    placeholder="请输入当前密码" required>
                            </div>
                            <div class="form-group">
                                <label>新密码</label>
                                <input type="password" id="newPassword" class="form-input" 
                                    placeholder="请输入新密码" required>
                            </div>
                            <div class="form-group">
                                <label>确认新密码</label>
                                <input type="password" id="confirmPassword" class="form-input" 
                                    placeholder="请再次输入新密码" required>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-lock-password-line"></i>
                                修改密码
                            </button>
                        </div>
                    </form>
                </section>

                <!-- 历史记录 -->
                <section id="history" class="content-section">
                    <div class="section-header">
                        <h2>    <br>    </h2>
                        <p>    <br>    </p>
                        <h2>历史记录</h2>
                        <p>查看通知历史记录</p>
                    </div>

                    <div class="history-toolbar">
                        <div class="toolbar-left">
                            <select id="historyFilter" class="form-select">
                                <option value="all">全部记录</option>
                                <option value="today">今日记录</option>
                                <option value="week">本周记录</option>
                            </select>
                        </div>
                        <div class="toolbar-right">
                            <button class="btn btn-secondary" id="refreshHistoryBtn">
                                <i class="ri-refresh-line"></i>
                                刷新
                            </button>
                        </div>
                    </div>

                    <div class="history-list" id="historyList">
                        <!-- 历史记录将通过JavaScript动态加载 -->
                    </div>
                </section>
            </div>
        </main>
    </div>

    <!-- Toast提示 -->
    <div class="toast-container" id="toastContainer">
        <div class="toast-content">
            <div class="toast-message"></div>
        </div>
    </div>

    <script src="config.js"></script>
    <script src="admin.js"></script>
</body>
</html>